<template>
  <div class="document-management">
    <!-- 页面标题和操作区域 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h1 class="page-title">文档管理</h1>
          <p class="page-subtitle">管理和组织您的文档资源</p>
        </div>
        <div class="action-section">
          <el-button type="primary" size="large" @click="showUploadDialog = true" class="upload-btn">
            <el-icon>
              <Upload />
            </el-icon>
            上传文档
          </el-button>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <div class="filter-container">
        <el-input v-model="searchParams.keyword" placeholder="搜索文档名称..." class="search-input" clearable
          @clear="handleSearch" @keyup.enter="handleSearch">
          <template #prefix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>

        <el-select v-model="searchParams.fileType" placeholder="文件类型" clearable class="filter-select"
          @change="handleSearch">
          <el-option label="全部类型" value="" />
          <el-option label="PDF文档" value="pdf" />
          <el-option label="Word文档" value="doc,docx" />
          <el-option label="Excel表格" value="xls,xlsx" />
          <el-option label="PPT演示" value="ppt,pptx" />
          <el-option label="图片文件" value="png,jpg,jpeg" />
          <el-option label="文本文件" value="txt,md" />
        </el-select>

        <el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" class="date-picker" @change="handleDateChange" />

        <el-button @click="resetFilters" class="reset-btn">
          <el-icon>
            <Refresh />
          </el-icon>
          重置
        </el-button>
      </div>
    </div>

    <!-- 文档列表 -->
    <div class="table-section">
      <el-card class="table-card">
        <el-table v-loading="loading" :data="documentList" border class="document-table"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" />
          <el-table-column prop="title" label="文档名称" min-width="160">
            <template #default="{ row }">
              <div class="file-name-cell">
                <el-icon class="file-icon">
                  <component :is="getFileIcon(row.fileType)" />
                </el-icon>
                <span class="file-name" @click="handlePreview(row)">{{ row.title }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 新增描述列 -->
          <el-table-column prop="description" label="描述" width="180">
            <template #default="{ row }">
              <el-tooltip v-if="row.description" effect="light" :content="row.description">
                <span class="description-text">{{ truncateDescription(row.description) }}</span>
              </el-tooltip>
              <span v-else class="no-description">无描述</span>
            </template>
          </el-table-column>

          <!-- 新增标签列 -->
          <el-table-column prop="tags" label="标签" width="150">
            <template #default="{ row }">
              <div class="tags-container">
                <el-tag v-for="(tag, index) in getTagsArray(row.tags)" :key="index" size="small" class="tag-item">
                  {{ tag }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fileType" label="类型" width="90">
            <template #default="{ row }">
              <el-tag :type="getFileTypeTag(row.fileType)" class="file-type-tag">
                {{ getFileTypeName(row.fileType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="大小" width="90">
            <template #default="{ row }">
              <span class="file-size">{{ formatFileSize(row.fileSize) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="上传时间" width="160" sortable>
            <template #default="{ row }">
              {{ formatDateTime(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="上传者" width="90" />
          <el-table-column prop="status" label="权限" width="90">
            <template #default="{ row }">
              <div class="permission-display" @click.stop="handleEdit(row)">
                <el-tag :type="getAccessLevelTag(row.accessLevel)" effect="light">
                  {{ getAccessLevelName(row.accessLevel) }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button size="small" type="primary" @click="handlePreview(row)" class="action-btn">
                  <el-icon>
                    <View />
                  </el-icon>
                  预览
                </el-button>
                <el-button size="small" @click="handleEdit(row)" class="action-btn">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  编辑
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(row.id)" class="action-btn">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination :current-page="searchParams.page" :page-size="searchParams.pageSize" :total="total"
            :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-card>
    </div>

    <!-- 批量操作 -->
    <div v-if="selectedDocuments.length > 0" class="batch-actions">
      <div class="batch-info">
        <el-icon>
          <InfoFilled />
        </el-icon>
        <span>已选择 {{ selectedDocuments.length }} 项</span>
      </div>
      <div class="batch-buttons">
        <el-button @click="handleBatchSetVisibility" class="batch-btn">
          <el-icon>
            <Setting />
          </el-icon>
          批量设置权限
        </el-button>
        <el-button type="danger" size="small" @click="handleBatchDelete" class="batch-btn">
          <el-icon>
            <Delete />
          </el-icon>
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 上传对话框 -->
    <UploadDialog v-model="showUploadDialog" @success="handleUploadSuccess" />

    <!-- 预览对话框 -->
    <PreviewDialog v-model="showPreviewDialog" :document="currentDocument" />

    <!-- 编辑对话框 -->
    <EditDialog v-model="showEditDialog" :document="currentDocument" @success="handleEditSuccess" />

    <!-- 删除确认对话框 -->
    <delete-confirm-dialog v-model="showDeleteConfirmDialog" :id="deleteId" @success="handleDeleteSuccess" />

    <!-- 批量删除确认对话框 -->
    <batch-delete-confirm-dialog v-model="showBatchDeleteConfirmDialog" :ids="selectedDocumentIds"
      @success="handleBatchDeleteSuccess" />

    <!-- 添加批量权限对话框 -->
    <BatchVisibilityDialog v-model="showBatchVisibilityDialog" :selected-ids="selectedDocumentIds"
      @success="handleBatchVisibilitySuccess" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, shallowRef } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Upload, View, Edit, Delete, InfoFilled, Refresh, Setting } from '@element-plus/icons-vue'
import UploadDialog from '@/components/decuments/DocumentUpload.vue'
import PreviewDialog from '@/components/decuments/DocumentPreview.vue'
import EditDialog from '@/components/decuments/DecumentEdit.vue'
import DeleteConfirmDialog from '@/components/decuments/DecumentDelete.vue'
import BatchDeleteConfirmDialog from '@/components/decuments/DecumentDeleteBatch.vue'
import BatchVisibilityDialog from '@/components/decuments/BatchVisibilityDialog.vue'
import { getDocuments } from '@/api/document'
import { formatFileSize } from '@/utils/format'

// 查询参数（后端分页 + 关键字过滤；其他过滤暂在前端或待扩展后端）
const initialSearchParams = {
  page: 1,
  pageSize: 10,
  keyword: '',
  fileType: '',
  startTime: '',
  endTime: '',
  dateRange: []
}

const searchParams = ref({ ...initialSearchParams })
// 当前页数据
const documentList = shallowRef([])
const total = ref(0)
const loading = ref(false)

// 对话框控制
const showUploadDialog = ref(false)
const showPreviewDialog = ref(false)
const showEditDialog = ref(false)
const showDeleteConfirmDialog = ref(false)
const showBatchDeleteConfirmDialog = ref(false)
const showBatchVisibilityDialog = ref(false)

// 当前选中的文档
const currentDocument = ref(null)
const deleteId = ref(null)
const selectedDocuments = ref([])

// 计算属性
const selectedDocumentIds = computed(() => {
  return selectedDocuments.value.map(doc => doc.id)
})

// 防抖
function debounce(fn, delay = 350) {
  let timer
  return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay) }
}

function buildQuery() {
  const p = searchParams.value
  const q = { page: p.page, pageSize: p.pageSize }
  if (p.keyword) q.keyword = p.keyword
  return q
}

const fetchDocumentList = async () => {
  loading.value = true
  try {
    const resp = await getDocuments(buildQuery())
    const data = resp.data || {}
    let list = data.documents || data.Documents || []
    // 规范化 fileType（后端返回可能带 . 例如 .pdf）
    list = Array.isArray(list) ? list.map(d => ({
      ...d,
      fileType: (d.fileType || '').replace(/^\./, '').toLowerCase()
    })) : []
    documentList.value = list
    total.value = data.totalCount || data.TotalCount || 0
    if (!list.length) {
      // 如果无数据且不是第一页，尝试回退到第一页（防止删到空页）
      if (searchParams.value.page > 1) {
        searchParams.value.page = 1
        return fetchDocumentList()
      }
    }
  } catch (e) {
    console.error('获取文档列表失败:', e)
    const status = e?.response?.status
    if (status === 401) {
      ElMessage.error('未授权或登录已失效，请重新登录')
    } else {
      ElMessage.error('获取文档列表失败')
    }
  } finally { loading.value = false }
}

const debouncedSearch = debounce(() => { searchParams.value.page = 1; fetchDocumentList() })

// 重置筛选条件
const resetFilters = () => {
  searchParams.value = { ...initialSearchParams }
  fetchDocumentList()
}

// 方法
const handleSearch = () => { debouncedSearch() }

const handleDateChange = () => {
  if (searchParams.value.dateRange && searchParams.value.dateRange.length === 2) {
    searchParams.value.startTime = searchParams.value.dateRange[0]
    searchParams.value.endTime = searchParams.value.dateRange[1]
  } else {
    searchParams.value.startTime = ''
    searchParams.value.endTime = ''
  }
  // 暂未后端过滤，仅触发本地刷新（如需精确需扩展 API）
  debouncedSearch()
}

const handleSelectionChange = (selection) => {
  selectedDocuments.value = selection
}

const handlePreview = (row) => {
  console.log('预览文档:', row);

  currentDocument.value = row
  showPreviewDialog.value = true
}

const handleEdit = (row) => {
  currentDocument.value = row
  showEditDialog.value = true
}

const handleDelete = (id) => {
  deleteId.value = id
  showDeleteConfirmDialog.value = true
}

const handleBatchDelete = () => {
  showBatchDeleteConfirmDialog.value = true
}

const handleBatchSetVisibility = () => {
  showBatchVisibilityDialog.value = true
}

const handleUploadSuccess = () => {
  showUploadDialog.value = false
  fetchDocumentList()
}

const handleEditSuccess = () => {
  showEditDialog.value = false
  fetchDocumentList()
}

const handleDeleteSuccess = () => {
  showDeleteConfirmDialog.value = false
  fetchDocumentList()
}

const handleBatchDeleteSuccess = () => {
  showBatchDeleteConfirmDialog.value = false
  selectedDocuments.value = []
  fetchDocumentList()
}

const handleBatchVisibilitySuccess = () => {
  showBatchVisibilityDialog.value = false
  selectedDocuments.value = []
  fetchDocumentList()
}

// 截断过长的描述文本
const truncateDescription = (text) => {
  if (!text) return ''
  return text.length > 20 ? text.substring(0, 20) + '...' : text
}

// 将逗号分隔的标签字符串转为数组
const getTagsArray = (tags) => {
  if (!tags) return []
  return tags.split(',').filter(tag => tag.trim())
}

// 获取权限显示名称
const getAccessLevelName = (level) => {
  const levelMap = {
    'Public': '公开',
    'Internal': '内部',
  }
  return levelMap[level] || level || '未知'
}

// 获取权限标签类型
const getAccessLevelTag = (level) => {
  const tagMap = {
    'Public': 'success',
    'Internal': 'danger',
    // 添加其他可能的权限级别对应的标签类型
  }
  return tagMap[level] || 'info'
}

// 日期时间格式化
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString() // 或使用其他格式化方式
}
// 分页处理
const handleSizeChange = (size) => { searchParams.value.pageSize = size; fetchDocumentList() }
const handleCurrentChange = (page) => { searchParams.value.page = page; fetchDocumentList() }

// 监听关键词 & pageSize 变化（pageSize 使用 size-change 事件已触发 fetch，这里仅监听 keyword）
watch(() => searchParams.value.keyword, () => debouncedSearch())

// 文件图标映射
const getFileIcon = (fileType) => {
  const iconMap = {
    pdf: 'Document',
    doc: 'Document',
    docx: 'Document',
    xls: 'Grid',
    xlsx: 'Grid',
    ppt: 'Picture',
    pptx: 'Picture',
    png: 'Picture',
    jpg: 'Picture',
    jpeg: 'Picture',
    txt: 'Document',
    md: 'Document'
  }
  return iconMap[fileType] || 'Document'
}

// 获取文件类型名称
const getFileTypeName = (fileType) => {
  const typeMap = {
    pdf: 'PDF',
    doc: 'Word',
    docx: 'Word',
    xls: 'Excel',
    xlsx: 'Excel',
    ppt: 'PPT',
    pptx: 'PPT',
    png: '图片',
    jpg: '图片',
    jpeg: '图片',
    txt: '文本',
    md: 'Markdown'
  }
  return typeMap[fileType] || fileType
}

// 获取文件类型标签
const getFileTypeTag = (fileType) => {
  const tagMap = {
    pdf: 'danger',
    doc: 'primary',
    docx: 'primary',
    xls: 'success',
    xlsx: 'success',
    ppt: 'warning',
    pptx: 'warning',
    png: '',
    jpg: '',
    jpeg: '',
    txt: 'info',
    md: 'info'
  }
  return tagMap[fileType] || ''
}

// 初始化加载数据
onMounted(fetchDocumentList)
</script>

<style scoped>
.document-management {
  padding: 0;
}

/* 页面标题区域 */
.page-header {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(147, 51, 234, 0.9) 100%);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(20px);
  animation: neonGlow 4s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  animation: neonSweep 5s ease-in-out infinite;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 500;
}

.action-section {
  flex-shrink: 0;
}

.upload-btn {
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

.upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.4);
}

/* 筛选区域 */
.filter-section {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(20px);
}

.filter-container {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 300px;
}

.filter-select {
  width: 160px;
}

.date-picker {
  width: 240px;
}

/* 表格区域 */
.table-section {
  margin-bottom: 24px;
}

.table-card {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.2);
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.document-table {
  width: 100%;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.action-btn {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 4px 8px;
  height: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.action-btn .el-icon {
  font-size: 12px;
}

/* 表格操作列优化 */
.document-table :deep(.el-table__cell) {
  padding: 8px 0;
}

.document-table :deep(.el-table__fixed-right) {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Element Plus 组件样式覆盖 */
:deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

:deep(.el-input__wrapper:hover) {
  border-color: rgba(0, 212, 255, 0.5) !important;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: rgba(0, 212, 255, 0.8) !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2) !important;
}

:deep(.el-input__inner) {
  color: #ffffff !important;
  background: transparent !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 400 !important;
}

:deep(.el-select) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
}

:deep(.el-select:hover) {
  border-color: rgba(0, 212, 255, 0.5) !important;
}

:deep(.el-select .el-input__wrapper) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-date-editor) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
}

:deep(.el-date-editor:hover) {
  border-color: rgba(0, 212, 255, 0.5) !important;
}

:deep(.el-table) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
  color: #ffffff !important;
}

:deep(.el-table__body-wrapper) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
}

:deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
}

:deep(.el-table__fixed-body-wrapper) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
}

:deep(.el-table__fixed-header-wrapper) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
}

:deep(.el-table th) {
  background: rgba(0, 212, 255, 0.15) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

:deep(.el-table td) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-table tr:hover > td) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1) !important;
}

:deep(.el-table--border) {
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

:deep(.el-table--border th) {
  border-right: 1px solid rgba(0, 212, 255, 0.3) !important;
}

:deep(.el-table--border td) {
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-button) {
  background: rgba(0, 212, 255, 0.25) !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-button:hover) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%) !important;
  border-color: rgba(0, 212, 255, 0.5) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2) !important;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #0099cc 0%, #0077a3 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4) !important;
}

:deep(.el-tag) {
  background: rgba(0, 212, 255, 0.25) !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-pagination) {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

:deep(.el-pager li) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-pager li:hover) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1) !important;
}

:deep(.el-pager li.is-active) {
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important;
  border-color: rgba(0, 212, 255, 0.6) !important;
}

:deep(.btn-prev),
:deep(.btn-next) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

:deep(.btn-prev:hover),
:deep(.btn-next:hover) {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%) !important;
  border-color: rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1) !important;
}

/* 文件名称单元格 */
.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.file-icon {
  font-size: 18px;
  color: #00d4ff;
  flex-shrink: 0;
}

.file-name {
  cursor: pointer;
  color: #00d4ff;
  font-weight: 600;
  transition: all 0.3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.file-name:hover {
  color: #0099cc;
  text-decoration: underline;
}

/* 文件类型标签 */
.file-type-tag {
  border-radius: 6px;
  font-weight: 600;
  padding: 2px 8px;
  font-size: 11px;
}

/* 文件大小 */
.file-size {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 权限显示 */
.permission-display {
  cursor: pointer;
  display: inline-flex;
  transition: all 0.3s ease;
}

.permission-display:hover {
  transform: scale(1.05);
}

.permission-display .el-tag {
  font-size: 11px;
  padding: 2px 6px;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  background: rgba(0, 212, 255, 0.05);
  border-top: 1px solid rgba(0, 212, 255, 0.2);
}

/* 批量操作 */
.batch-actions {
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);
}

.batch-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.batch-buttons {
  display: flex;
  gap: 12px;
}

.batch-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.batch-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

/* 添加重置按钮样式 */
.reset-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 8px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.reset-btn:hover {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
  color: #ffffff;
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-header {
    padding: 24px;
  }

  .filter-container {
    gap: 12px;
  }

  .search-input {
    min-width: 250px;
  }

  .action-buttons {
    gap: 4px;
  }

  .action-btn {
    padding: 3px 6px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 20px;
  }

  .page-title {
    font-size: 24px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .filter-select,
  .date-picker {
    width: 100%;
  }

  .batch-actions {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .batch-buttons {
    justify-content: center;
  }

  /* 移动端表格优化 */
  .document-table {
    font-size: 12px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
    padding: 4px 6px;
    height: 24px;
    font-size: 10px;
  }

  .action-btn .el-icon {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 16px;
  }

  .page-title {
    font-size: 20px;
  }

  .filter-section {
    padding: 16px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 2px;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
    padding: 3px 4px;
    height: 22px;
    font-size: 9px;
  }

  .action-btn .el-icon {
    font-size: 9px;
  }

  .file-name {
    font-size: 11px;
  }

  .file-icon {
    font-size: 14px;
  }
}

/* 霓虹灯动画关键帧 */
@keyframes neonGlow {
  0% {
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  }

  100% {
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3), 0 0 30px rgba(0, 212, 255, 0.2);
  }
}

@keyframes neonSweep {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes neonPulse {
  0% {
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  }

  50% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
  }

  100% {
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  }
}

@keyframes neonBorder {
  0% {
    border-color: rgba(0, 212, 255, 0.3);
  }

  100% {
    border-color: rgba(0, 212, 255, 0.8);
  }
}
</style>